<template>
  <div class="innovate-container-padding">
    <div class="buttonList">
      <el-button @click="handleExport">导出数据</el-button>
      <el-button type="danger" @click="del">删除</el-button>
      <el-button type="primary" @click="edit">修改</el-button>
    </div>
    <!-- <el-descriptions title="" direction="vertical" :column="4" border>
      <el-descriptions-item label="记录ID" align="center">
        123
      </el-descriptions-item>
      <el-descriptions-item label="记录创建人" align="center">
        aa
      </el-descriptions-item>
      <el-descriptions-item label="记录创建时间" align="center">
        2023-9-16 10:57:21
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      class="margin-top20 margin-bottom20"
      title="其他信息"
      direction="vertical"
      :column="2"
      border
    >
      <el-descriptions-item label="上报单位" align="center">
        123
      </el-descriptions-item>
      <el-descriptions-item label="上报人" align="center">
        aa
      </el-descriptions-item>
    </el-descriptions> -->
    <AddReview :disabled="!isEdit" :user-info="formInline" />
    <el-divider />
    <!-- <div class="title">操作日志</div>
    <vxe-grid v-bind="operationLog" :height="height">
      <template #pager>
        <vxe-pager
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        ></vxe-pager>
      </template>
</vxe-grid> -->
  </div>
</template>

<script setup lang="ts">
import AddReview from './addInnovate.vue'
import { reactive, ref, onMounted } from 'vue'
import {
  VxePagerEvents,
} from 'vxe-table'
import { useRoute, useRouter } from 'vue-router'
import { getInnovateInfo, deleteInnovate } from '@/api/innovate'
import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

const isEdit = ref(false)
const route = useRoute()
const formInline = ref({})
const id = ref<number>()
const { closeTabNavigate } = useCloseTabNavigate()
const edit = () => {
  closeTabNavigate({ name: 'AddInnovate', query: { id: id.value } })
}

const handleExport = () => {
  console.log('导出数据');

}
const getInfo = () => {
  getInnovateInfo({ id: id.value, getType: 2 }).then((res) => {
    formInline.value = res.data
  })
}

const del = () => {
  ElMessageBox.confirm('确定删除该条数据?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteInnovate(id.value).then((res) => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      closeTabNavigate({ name: 'innovate' })
    })
  })
}

onMounted(() => {
  id.value = Number(route.query.id)
  getInfo()
})

const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})

const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize,
}) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  // findList()
}

const height = ref(0)
interface BaseTableHeight {
  (padding: number): number;
}
const $baseTableHeight = inject<BaseTableHeight>('$baseTableHeight')
onBeforeMount(() => {
  window.addEventListener('resize', handleHeight)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleHeight)
})

const handleHeight = () => {
  height.value = $baseTableHeight(0)
}
</script>

<style scoped lang="scss">
$margin-bottom: 20px;

.margin-top20 {
  margin-top: $margin-bottom;
}

.margin-bottom20 {
  margin-bottom: $margin-bottom;
}

.buttonList {
  display: flex;
  justify-content: end;
  padding-bottom: $margin-bottom;
  border-bottom: 1px solid #edeff2;
  margin-bottom: $margin-bottom;
}

.title {
  border-radius: 2px;
  border-left: 5px solid #1890ff;
  height: 28px;
  background: #f7f8f9;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
  padding-left: 12px;
  line-height: 28px;
  // margin-bottom: $margin-bottom;
}

.form-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;

  :deep(.el-form-item) {
    margin-right: 0;
  }
}

.inventor {
  p {
    text-align: left;
  }

  text-align: center;
}
</style>
